<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<link href="/js/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
<div style="padding:10px 10px 10px 10px">
    <form id="addimages" class="itemForm" method="post">
        <body onload='init()'>
                <table cellpadding="5"> 
        <td>图片:</td>
        <td>
            <a href="javascript:void(0)" class="easyui-linkbutton picFileUpload" id="picFileUpload">上传图片</a>
            <input type="hidden" name="image"/>
        </td>
    </table>
        <input type="hidden" name="itemParams"/>
        </body>
    </form>
    <div style="padding:5px">
        <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="submitForm()">提交</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="clearForm()">重置</a>
    </div>
</div>

<script type="text/javascript">
    var E3 = {
        // 编辑器参数
        kingEditorParams : {
            //指定上传文件参数名称
            filePostName  : "uploadFile",
            //指定上传文件请求的url。
            uploadJson : '/pic/upload',
            //上传类型，分别为image、flash、media、file
            dir : "image"
        },

        init : function(data){
            // 初始化图片上传组件
            this.initPicUpload(data);
        },
        // 初始化图片上传组件
        initPicUpload : function(data){
            $("#picFileUpload").each(function(i,e){
                var _ele = $(e);
                _ele.siblings("div.pics").remove();
                _ele.after('\
    			<div class="pics">\
        			<ul></ul>\
        		</div>');
                // 回显图片
                if(data && data.pics){
                    var imgs = data.pics.split(",");
                    for(var i in imgs){
                        if($.trim(imgs[i]).length > 0){
                            _ele.siblings(".pics").find("ul").append("<li><a href='"+imgs[i]+"' target='_blank'><img src='"+imgs[i]+"' width='80' height='50' /></a></li>");
                        }
                    }
                }
                //给“上传图片按钮”绑定click事件
                $(e).click(function(){
                    var form = $(this).parentsUntil("form").parent("form");
                    //打开图片上传窗口
                    KindEditor.editor(E3.kingEditorParams).loadPlugin('multiimage',function(){
                        var editor = this;
                        editor.plugin.multiImageDialog({
                            clickFn : function(urlList) {
                                var imgArray = [];
                                KindEditor.each(urlList, function(i, data) {
                                    imgArray.push(data.url);
                                    form.find(".pics ul").append("<li><a href='"+data.url+"' target='_blank'><img src='"+data.url+"' width='80' height='50' /></a></li>");
                                });
                                form.find("[name=image]").val(imgArray.join(","));
                                editor.hideDialog();
                            }
                        });
                    });
                });
            });
        },
    };
    var itemAddEditor ;
    function init(){
        //初始化类目选择和图片上传器
        E3.init({fun:function(node){
            }});
    }
</script>
